<template>
    <view class="result">
		<view class="title">
			应纳个税
		</view>
		<view class="totalBox">
			￥<text class="number">{{taxPayable}}</text>
		</view>
		<view class="tipsBox">
			{{tips}}
		</view>
		<ring-chart
			:dataAs="histogramData"
			canvasId="ht2"
			valueKey="value"
			
		/>
		
		<view class="formulatable" style="margin: 20px 0;">
			<text style="float: left; font-size: 1.0333rem;">税率:</text>
			<text style="float: right; font-size: 1.0333rem; color: #67b1f1;">20%</text>
			<view style="clear: both;"></view>
		</view>
		<view class="footTips">
			计算结果仅供参考
		</view>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import RingChart from '@/components/stan-ucharts/RingChart.vue';
	const arrays = [{'name': '税后资金', 'data': 0}, {'name': '应纳个税', 'data': 0}]
	export default {
	    name: 'Index',
	    components: {
			RingChart
	    },
		computed: {
			...mapState(['wages']),
			histogramData() {
				let data = {
					value: []
				}
				arrays[0].data = this.wages.interestResult.afterTaxIncome
				arrays[1].data = this.wages.interestResult.taxPayable
				data.value = arrays
				return data
			},
			taxPayable() {
				let taxCount = 0
				if(this.wages.interestResult.calClass == '1') {
					taxCount = this.wages.interestResult.taxPayable *1
				}else {
					taxCount = this.wages.interestResult.afterTaxIncome*1 + this.wages.interestResult.taxPayable *1
				}
				return taxCount
			}
		},
	    data() {
	        return {
				tips: '纳税初级玩家，赚钱不易，且花且珍惜！',
	        }
	    }
	}
</script>

<style>
	.result .title {
		font-size: 1.3rem;
		color: #999;
		text-align: center;
		padding: 30px;
	}
	
	.result .totalBox {
		text-align: center;
		font-size: 1.3333rem;
		color: rgb( 2,198,191);
	}
	.result .totalBox .number {
		font-size: 2.53333rem;
	}
	.result .tipsBox {
		text-align: center;
		font-size: .83333rem;
		padding: 10px 5px;
		border-radius: 3px;
		background-color: #e9e9e9;
		margin: 0 25px;
	}
	.result .crudTitle {
		text-align: center;
		font-weight: 700;
		font-size: 1.53333rem;
		margin: 20px 0;
	}
	
	
	.result .formulatable {
	    padding: .433333rem .7rem .753333rem .7rem
	}
	.result .formulatable table {
	    width: 100%;
	    text-align: center;
	    color: #000;
	    font-size: .72rem;
		border-collapse: collapse;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: Microsoft Yahei,"\9ED1\4F53";
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		user-select: none;
		line-height: 1;
	}
	
	.result .formulatable table tr:first-child {
	    border: .026667rem solid #c0d4da;
	    border-bottom: none
	}
	
	.result .formulatable table tr {
	    height: 1.6333rem;
	    line-height: 1.6333rem
	}
	
	.result .formulatable table tr th {
	    background-color: #f6f8f9
	}
	
	.result .formulatable table tr td {
	    border: .026667rem solid #c0d4da
	}
	.result .formulatable table tr:nth-child(even) {
		background-color: rgba(211,222,223,.2)
	}

	.result .footTips {
		height: 50px;
		line-height: 50px;
		font-size: 0.9em;
		color: #999999;
		text-align: center;
	}
</style>